<template>
  <div class="public_height100 p20 pub_bgColorFFF">
    <div class="pub_innerTitle pb13">会员审核</div>
    <div class="table_content pt13">
      <!-- ====== 表格上方的筛选条件 start ======-->
      <div class="table_filter flex_space_between">
        <div class="flex_start ">
          <div class="table_filter_search ">
            <el-select v-model="params.auditStatus" placeholder="请选择" class="pub_select" @change="handleSearch">
              <el-option v-for="item in statusList" :key="item.status" :label="item.name" :value="item.status"> </el-option>
            </el-select>
          </div>
          <div class="table_filter_search ml12">
            <el-button type="text" class="public_confirm_btn pub_button" @click="handleSearch"> 搜索 </el-button>
          </div>
        </div>
      </div>
      <!-- ====== 表格上方的筛选条件 end ======-->
      <el-table ref="multipleTable" size="mini" :data="tableData" tooltip-effect="dark" border :height="`${536 * $f}px`" class="wp100 mt12" @selection-change="handleSelectionChange">
        <el-table-column label="订单编号" show-overflow-tooltip prop="id" align="center" />
        <el-table-column label="账号" show-overflow-tooltip prop="username" align="center" />
        <el-table-column key="businessLicense" label="转账截图" align="center">
          <template slot-scope="{ row }">
            <el-image style="width: 50px; height: 50px; cursor: pointer" :src="row.screenShot" :preview-src-list="[row.screenShot]" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="会员类型" show-overflow-tooltip prop="orderNo" align="center">
          <template slot-scope="{ row }">
            {{ row.subscribeType === '1' ? '体验会员' : '年费会员' }}
          </template>
        </el-table-column>
        <el-table-column label="支付金额" show-overflow-tooltip prop="orderNo" align="center">
          <template slot-scope="{ row }">
            {{ row.subscribeType === '1' ? '￥19.9' : '￥298' }}
          </template>
        </el-table-column>
        <el-table-column label="提交时间" show-overflow-tooltip align="center">
          <template slot-scope="{ row }">
            {{ row.submitTime || '/' }}
          </template>
        </el-table-column>
        <el-table-column v-if="params.auditStatus != 1" key="auditStatus" label="审批状态" align="center">
          <template slot-scope="{ row }">
            {{ row.auditStatus === '4' ? '驳回' : '通过' }}
          </template>
        </el-table-column>
        <el-table-column key="rejectReason" label="拒绝原因" show-overflow-tooltip align="center" :min-width="`${200 * $f}`">
          <template slot-scope="{ row }">
            {{ row.rejectReason || '/' }}
          </template>
        </el-table-column>
        <el-table-column v-if="params.auditStatus != 1" key="auditTime" label="审批时间" prop="auditTime" align="center" />
        <el-table-column v-if="params.auditStatus == 4" key="rejectReason" label="原因" show-overflow-tooltip prop="rejectReason" align="center" :width="`${200 * $f}`" />
        <el-table-column v-if="params.auditStatus == 1" key="operation" label="操作" :width="`${120 * $f}`" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" class="pub_button public_1EB398_btn" size="mini" @click="showPassBtn(row)">同意</el-button>
            <el-button type="text" class="pub_button public_F16363_btn" size="mini" @click="editBtnClick(row)">驳回</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
          <PageEmptyData />
        </template>
      </el-table>
      <div ref="pubPageinationRef" class="pub_pageination flex_center mt18">
        <el-pagination background :page-size="params.pageSize" :current-page.sync="params.pageNum" layout="total,prev, pager, next,sizes" :total="params.total" @current-change="changePage" @size-change="changeSize"> </el-pagination>
      </div>
    </div>
    <!-- 审核 -->
    <PageDialog :title="'驳回'" :dialog-visible="addDialogVisible" :width="`${600 * $f}px`" @close="closeDialog" @submit="confirmAdd">
      <el-form ref="ruleForm" :model="addParams" :rules="rules" label-width="5rem" class="pub_form_item">
        <el-form-item label="驳回原因" prop="rejectReason">
          <el-input v-model="addParams.rejectReason" type="textarea" class="pub_input" :rows="3" placeholder="请输入内容" :maxlength="50"></el-input>
        </el-form-item>
      </el-form>
    </PageDialog>
    <PageDialog :title="'通过'" :dialog-visible="passDialogVisible" :width="`${$f * 600}px`" @close="closeDialog" @submit="conmfimPass">
      <div class="pub_tips">确定要通过吗</div>
    </PageDialog>
    <PageDialog :title="'驳回'" :dialog-visible="refuseDialogVisible" :width="`${$f * 600}px`" @close="closeDialog" @submit="conmfimRefuse">
      <div class="pub_tips">确定要驳回吗</div>
    </PageDialog>
  </div>
</template>
<script>
import tableFun from '@/mixin/tableFun.js';
export default {
  mixins: [tableFun],
  data() {
    return {
      statusList: [
        { name: '待审核', status: '1' },
        { name: '已通过', status: '3' },
        { name: '已驳回', status: '4' }
      ],
      params: {
        auditStatus: '1',
        total: 0,
        pageSize: 10,
        pageNum: 1,
        content: ''
      },
      refuseDialogVisible: false,
      passDialogVisible: false,
      addParams: {},
      // 表单验证规则
      rules: {
        rejectReason: [
          { required: true, message: '请输入驳回原因', trigger: 'blur' },
          { min: 1, max: 50, message: '驳回原因长度不超过50个字符', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    //关闭弹窗
    closeDialog() {
      this.refuseDialogVisible = false;
      this.passDialogVisible = false;
      this.addDialogVisible = false;
      this.addParams = Object.assign({}, this.$options.data().addParams); //重置参数
    },
    //获取表格数据
    async getDataList() {
      let res = await this.$api.get(this.$url.corporateTransferList, this.params);
      this.tableData = res.rows;
      this.params.total = res.total;
    },
    //修改页码
    changePage(pageNum) {
      this.params.pageNum = pageNum;
      this.getDataList();
    },
    //修改每页显示的条数
    changeSize(size) {
      this.params.pageSize = size;
      this.params.pageNum = 1;
      this.getDataList();
    },
    //搜索品牌
    handleSearch() {
      this.params.pageNum = 1;
      this.params.pageSize = 10;
      this.getDataList();
    },
    //确认新增发票
    async confirmAdd() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.refuseDialogVisible = true;
        }
      });
    },
    showPassBtn(item) {
      this.addParams = Object.assign({}, item);
      this.showDilogBtn('passDialogVisible');
    },
    async conmfimPass() {
      let res = await this.$api.post(this.$url.corporateTransferPass, this.addParams);
      await this.$api.post(this.$url.message, { messageTitle: '对公转账审批', messageContent: '开通会员对公转账审批已通过', receiveUserId: this.addParams.userId });
      if (res.code === 200) {
        this.closeDialog();
        this.handleSearch();
        this.$bus.$emit('getRedDotStatus');
        this.$message.success('通过成功');
      }
    },
    async conmfimRefuse() {
      let res = await this.$api.post(this.$url.corporateTransferReject, this.addParams);
      await this.$api.post(this.$url.message, { messageTitle: '对公转账审批', messageContent: '开通会员对公转账审批已驳回', receiveUserId: this.addParams.userId });
      if (res.code === 200) {
        this.closeDialog();
        this.handleSearch();
        this.$message.success('驳回成功');
      }
    }
  }
};
</script>
<style lang="less" scoped>
.table_content {
  height: calc(100% - 49px);
  .pub_table {
    height: calc(100% - 52px);
  }
}
</style>
